<template name="popout">
	<div class="rc-popout-wrapper rc-popout--{{ type }}" draggable="true">
		<div class="rc-popout rc-popout--{{ state }}" data-modal="modal">
			<header class="rc-popout__header">
				<h1 class="rc-popout__title">{{> icon icon="podcast"}}</h1>
				{{#if showVideoControls}}
					<div class="rc-popout__controls">
						{{#if isPlaying}}
							<button class="rc-popout__controls--pause"> {{> icon icon="pause" }} </button>
						{{else}}
							<button class="rc-popout__controls--play"> {{> icon icon="play" }} </button>
						{{/if}}
						{{#if isMuted}}
							<button class="rc-popout__controls--unmute"> {{> icon icon="volume-mute" }} </button>
						{{else}}
							<button class="rc-popout__controls--mute"> {{> icon icon="volume" }} </button>
						{{/if}}
					</div>
				{{/if}}
				{{#if showStreamControls}}
					<div class="rc-popout__controls">
							<button class="rc-popout__controls--record {{ getStreamStatus }}"> {{> icon icon="circle" }} </button>
							<span> {{ getStreamStatus }} </span>
					</div>
				{{/if}}
				{{#unless isAudioOnly}}
					<button class="contextual-bar__minimize js-minimize">
						{{> icon classes="rc-popout__minimize" icon="arrow-down"}}
					</button>
				{{/unless}}
				<button class="contextual-bar__close js-close" aria-label="{{_ "Close"}}">
					{{> icon classes="rc-popout__close" icon="plus"}}
				</button>
			</header>

			<section class="rc-popout__content rc-popout--{{ state }} ">
				{{#if content}}
					{{> Template.dynamic template=content data=data}}
				{{/if}}

				{{#if showVideoControls}}
					<div class="rc-popout__controls">
						{{#if isPlaying}}
							<button class="rc-popout__controls--pause"> {{> icon icon="pause" }} </button>
						{{else}}
							<button class="rc-popout__controls--play"> {{> icon icon="play" }} </button>
						{{/if}}
						{{#if isMuted}}
							<button class="rc-popout__controls--unmute"> {{> icon icon="volume-mute" }} </button>
						{{else}}
							<button class="rc-popout__controls--mute"> {{> icon icon="volume" }} </button>
						{{/if}}
					</div>
				{{/if}}
				{{#if showStreamControls}}
					<div class="rc-popout__controls">
						<button class="rc-popout__controls--record {{ getStreamStatus }}"> {{> icon icon="circle" }} </button>
						<span> {{ getStreamStatus }} </span>
					</div>
				{{/if}}
			</section>

		</div>
	</div>
</template>
